<template>
  <div>
    <div class="floor-title">{{ this.floorName }}</div>
    <div class="others">
      <div v-for="(item, index) in floorData" :key="index">
        <img :src="item.IMAGE1" width="100px" @click="goDetail(item.ID)" :onerror="errorImg"/>
        <!-- <el-image :src="item.IMAGE1" width="100px" height="100px" lazy></el-image> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "floorComponent",
  data() {
    return {
      errorImg: 'this.src="' + require('@/assets/image/errorimg.png') + '"'
    };
  },
  props: ["floorData", "floorName"],
  methods: {
    goDetail(goodsId) {
      this.$router.push({ name: "DetailGoodsInfo", query: { goodsId } });
    },
    // 不规则楼层要单独判断
    anomalyClick(number) {
      switch (number) {
        case 1:
          this.$router.push({
            name: "DetailGoodsInfo",
            query: { goodsId: this.floor_1.goodsId }
          });
          break;
        case 2:
          this.$router.push({
            name: "DetailGoodsInfo",
            query: { goodsId: this.floor_2.goodsId }
          });
          break;
        case 3:
          this.$router.push({
            name: "DetailGoodsInfo",
            query: { goodsId: this.floor_3.goodsId }
          });
          break;
      }
    }
  }
};
</script>

<style scoped>

.floor-title {
  padding: 0.3rem 0;
  font-size: 0.5rem;
  color: #e5017d;
  text-align: center;
}

.others {
  display: flex;
  flex-wrap: wrap;
  padding-left: 40px;
}
.others div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 10px;
}
</style>
